import React, { useEffect, useState } from 'react'
import { Table, Button, Tag, notification } from 'antd';
import axios from 'axios';

export default function NewsDraft(props) {
    // 草稿箱列表数据
    const [auditDataSource, setAuditDataSource] = useState([])
    // 解构用户信息
    const { username } = JSON.parse(localStorage.getItem("token"))

    // 获取审核列表数据
    useEffect(() => {
        axios.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`).then(res => {
            const list = res.data
            setAuditDataSource(list)
        }).catch(err => console.log(err))
    }, [username])
    // 列表头
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '新闻标题',
            dataIndex: 'title',
            render: (title, item) => {
                return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
            }

        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category) => {
                return category.title
            }
        },
        {
            title: '审核状态',
            dataIndex: 'auditState',
            render: (auditState) => {
                const colorList = ["", 'orange', 'green', 'red']
                const auditList = ["草稿箱", "审核中", "已通过", "未通过"]
                return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
            }
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    {
                        item.auditState === 1 && <Button danger onClick={() => clickOperate(item, 1)}>退回</Button>
                    }
                    {
                        item.auditState === 2 && <Button style={{ background: '#7cc53e', color: '#fff' }} onClick={() => clickOperate(item, 2)}>发布</Button>
                    }
                    {
                        item.auditState === 3 && <Button type="primary" onClick={() => clickOperate(item, 3)}>更新</Button>
                    }
                </div>
            }
        },
    ];
    // 点击了审核操作按钮 退回/发布/更新
    const clickOperate = (item, auditState) => {
        // 点击了退回
        if (auditState === 1) {
            setAuditDataSource(auditDataSource.filter(data => data.id !== item.id))
            axios.patch(`/news/${item.id}`, {
                auditState: 0
            }).then(res => {
                notification.info({
                    message: `通知`,
                    description:
                        `您可以回到草稿箱中查看您的新闻`,
                    placement: "bottomRight"
                })
            })
            // console.log(item, 1);
        }
        // 点击了发布
        if (auditState === 2) {
            axios.patch(`/news/${item.id}`, {
                "publishState": 2,
                "publishTime": Date.now()
            }).then(res => {
                props.history.push('/publish-manage/published')
                notification.info({
                    message: `通知`,
                    description:
                        `您可以去到【发布管理/已经发布】中查看您的新闻`,
                    placement: "bottomRight"
                })
            })
            // console.log(item, 2);
        }
        // 点击了更新
        if (auditState === 3) {
            props.history.push(`/news-manage/update/${item.id}`)
            // console.log(item, 3);
        }
    }


    return (
        <div>
            <Table dataSource={auditDataSource} columns={columns}
                pagination={{ pageSize: 5 }}
                rowKey={item => item.id}
            />
        </div>
    )
}
